<template>
    <div class="label-modal-wrapper">
        <el-dialog :model-value="props.value" title="修改标签" width="600" destroy-on-close>
            <div class="categorization-box">
                <el-input v-model="filterText" placeholder="标签名称" />
                <el-tree
                    ref="treeRef"
                    :data="labelTreeShow"
                    :props="defaultProps"
                    default-expand-all
                    :default-checked-keys="labelDefaultChoice"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    node-key="labelNo"
                    show-checkbox
                >
                </el-tree>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="props.close">取消</el-button>
                    <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { runLabelService } from '@great/services';
import { ref } from 'vue';
import type { PopupBoxProps } from '@great/utils';
import { useRequest } from 'vue-request';
import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus';

interface IProps extends PopupBoxProps {
    labelChoice?: string[];
    labelTree?: Record<string, any>[];
    entityNo?: string;
    entityType: 'PRODUCT' | 'DEVICE';
    callBack?: () => Promise<void>;
}
interface Tree {
    [key: string]: any;
}
const props = defineProps<IProps>();
const defaultProps = {
    children: 'childLabel',
    label: 'labelName',
    value: 'labelNo'
};

const labelTreeShow = ref<Record<string, any>[]>([]);
const labelDefaultChoice = ref<string[]>([]);
// 筛选
const filterText = ref('');
const treeRef = ref<TreeInstance>();
watch(filterText, val => {
    treeRef.value!.filter(val);
});
const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true;
    return data.label.includes(value);
};
// 提交接口请求
const { run, loading } = useRequest(
    () => {
        return runLabelService.entityRef({
            entityNo: props.entityNo as string,
            labelNos: treeRef.value?.getCheckedKeys(true) as any,
            entityType: props.entityType
        });
    },
    {
        manual: true,
        onSuccess() {
            ElNotification({
                title: '修改成功！',
                type: 'success'
            });
            closeDialog();
        }
    }
);
// 表单提交
const submitForm = () => {
    run();
};
// 获取标签
const getLabelTree = async () => {
    if (props.labelTree && props.labelTree.length > 0) {
        labelTreeShow.value = props.labelTree;
    } else {
        const res = await runLabelService.getLabelTree({
            labelTypeNo: props.entityType == 'PRODUCT' ? 'labelType-producctLabel' : 'labelType-deviceLabel'
        });
        labelTreeShow.value = res.data;
    }
};

//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};
// 打开弹框
const openDialog = () => {
    getLabelTree();
    if (props.labelChoice) {
        labelDefaultChoice.value = JSON.parse(JSON.stringify(props.labelChoice));
    }
};

const init = () => {
    openDialog();
};
init();
</script>
<style scoped lang="scss"></style>
